<!-- 反馈领域 -->
<template>
		<custom-navbar title="反馈领域"></custom-navbar>
	<view class="areaContent">
		<view class="areaTitle">
			{{areaTitle}}
		</view>
		<view class="mian">
			<view class="title">
				效果评估
			</view>
			<view class="row fontCss">
				<view>{{feedbackObj.effectEvalute?.key}}</view>
				<view>
				<!-- <image src="../../static/icon/canlender.png" mode=""></image> -->
					<uni-datetime-picker v-model="feedbackObj.effectEvalute.fieldValue" :border="false" :clear-icon="false" type="date"/>
				</view>
			</view>
			<template v-for="(val,ind) in feedbackObj.content" :key="ind">
				<view class="title">
					{{val.title}}
				</view>
				<view class="areaList" v-for="(item,index) in val.list" :key="index">
					<view class="fontCss">
						{{item.dictLabel}}
					</view>
					<view class="writeLine" v-show="item.remark !== '其他描述'">
						<uni-easyinput  v-model="item.fieldValue" placeholder="请输入数字" :clearable="false" type="number"/>
						<view>({{item.remark}})</view>
					</view>
					<view class="textAreaWrap" v-show="item.remark === '其他描述'">
						<textarea v-model="item.fieldValue" :placeholder="`${areaTitle}其他描述`"  ></textarea>
					</view>
				</view>
			</template>
			<custom-button @tap="saveForm">填完保存</custom-button>
		</view>
		<uni-popup ref="messagePup" type="dialog">
				<uni-popup-dialog type="warn" cancelText="关闭" confirmText="同意"  content="保存后无法再进行修改!" @confirm="dialogConfirm"
					></uni-popup-dialog>
			</uni-popup>
	</view>

</template>

<script setup>
 import {onLoad} from '@dcloudio/uni-app'
import { reactive, ref } from 'vue';
import templateData from '@/utils/template.js'
import {getFeedbackFieldData,addFeedbackFieldData} from '@/api/document.js'
 const areaTitle = ref("")
 const descript = ref("")
 const deliveryId = ref("")
 const messagePup = ref("")
 onLoad((data)=>{
	 const {areaName,field,id} = data
	 areaTitle.value = areaName
	 deliveryId.value = id
	 setFeedBackData(field)
 })
 const filedList = ref([])
 const feedbackObj = reactive({
	 name:"",
	 effectEvalute:{
		 title:"",
		 key:"",
		 fieldValue:"",
		 dictType:"",
		 dictValue:""
	 },
	 content:[]
 })
 const setFeedBackData = async(field)=>{
const {code,data:res} = await getFeedbackFieldData({
	field
})
if(code === 200){
const newList = res.reduce((curr,val)=>{
		const flag = curr.some(item=>item.smallType === val?.smallType)
		const index = curr.findIndex(item=>{
			return item.smallType === val?.smallType
		})
		if(flag){
		 curr[index].list.push(val)
		}else{
		 curr.push({
			smallType:val.smallType,
			list:[val]
		 })	
		}
		return curr
	},[])
const contentList = newList.filter(val=>val.smallType !== "效果评估")
const evalueData = newList.filter(item=>item.smallType === "效果评估")[0].list
feedbackObj.name = areaTitle.value
feedbackObj.effectEvalute.title = evalueData[0].smallType
feedbackObj.effectEvalute.key = evalueData[0].dictLabel
feedbackObj.effectEvalute.fieldValue = evalueData[0].fieldValue
feedbackObj.effectEvalute.dictValue = evalueData[0].dictValue
feedbackObj.effectEvalute.dictType = evalueData[0].dictType
feedbackObj.content = contentList.map(val=>{
		 return {
			title:val.smallType,
			list:val.list.map(item=>{
				return {...item,fieldValue:""}
			})
		 }

	 })
}
 }
 const dateRange = ref("")
 const dialogConfirm = async()=>{
	 const list = flattenTree(feedbackObj.content)
	 	list.unshift({
	 		dictValue:feedbackObj.effectEvalute.dictValue,
	 		fieldValue:feedbackObj.effectEvalute.fieldValue,
	 		dictType:feedbackObj.effectEvalute.dictType,
	 		smallType:feedbackObj.effectEvalute.title
	 	})
	 	const postList = list.reduce((curr,val)=>{
	 		curr.push({
	 			deliveryId:deliveryId.value,
	 			dictValue:val.dictValue,
	 			fieldValue:val.fieldValue,
	 			fieldType:val.dictType,
	 			smallType:val.smallType,
	 		})
	 		return curr
	 	},[])
	 	const newPost = postList.filter(item=>{
	 		return item.fieldValue && item.fieldValue !== ""
	 	})
	 const {code,data:res} = await addFeedbackFieldData(newPost)
	 if(code === 200){
	 	if(res){
	 		uni.showToast({
	 			icon:"success",
	 			title:"保存成功！",
	 			duration:1000,
	 			complete() {
	 				uni.navigateBack()
	 			}
	 		})
	 	}else{
	 		uni.showToast({
	 			icon:"error",
	 			title:"保存失败！"
	 		})
	 	}
	 }else{
	 	 uni.showToast({
	 	 	icon:"error",
	 	 	title:"保存失败！"
	 	 })
	 }
 }
 // 保存填写的数据
 const saveForm = async()=>{
	 messagePup.value.open()
 }
function flattenTree(tree) {
  const result = [];

  function traverse(node) {
    result.push(node); // 将当前节点加入结果数组
    if (node.list && node.list.length > 0) {
      node.list.forEach(child => {
        traverse(child); // 递归处理子节点
      });
    }
  }

  tree.forEach(node => {
    traverse(node); // 从根节点开始遍历
  });
  const newResult = result.filter(val=>!val.list)
  return newResult;
}
</script>

<style lang="scss" scoped>
.areaContent{
	padding:32rpx 64rpx 80rpx;
	.areaTitle{
		font-weight: 500;
		font-size: 40rpx;
		color: #00041A;
	}
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: #00041A;
		margin:48rpx 0 32rpx;
	}
	.fontCss{
		font-weight: 400;
		font-size: 28rpx;
		color: #44474A;
	}

	.row{
		display: flex;
		align-items: center;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #F5FAFF;
		>view{
		display: flex;
		align-items: center;
		&:first-child{
			width: 60%;
		}
		&:last-child{
			flex: 1;
			justify-content: flex-end;
		}
		>image{
			width: 25rpx;
			height: 25rpx;
			margin-right: 10rpx;
		}	
		}
	}
	.areaList{
		.writeLine{
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F5FAFF;
			margin-bottom: 32rpx;
			>view{
				font-weight: 400;
				font-size: 28rpx;
				color: #BBC0C9;
			}
			
		}
	}
	.textAreaWrap{
		height: 264rpx;
		background: #F5F9FF;
		border-radius: 8rpx;
		border: 1rpx solid #ECEFF4;
		padding: 32rpx;
		margin-bottom: 72rpx;
	}
	:deep(.is-input-border){
		border: none;
	}
	:deep(.uni-easyinput__content-input){
		padding-left: 0 !important;
	}
	:deep(.uni-input-placeholder){
		font-size: 28rpx;
		color: #BBC0C9;
	}
}

:deep(.uniui-calendar) {
	&::before{
		color: #0D53FE !important;
	}
}
</style>
